<section class="as-login-template-wrap d-none">
  <h1 class="mb-0 text-center fs-2">{{ 'customer.login_page.title' | t }}</h1>
  <form action="{%- render 'account-api-host' -%}/auth/login" method="post" class="as-login-form mt-5" novalidate autocomplete="off">

    {% render 'account-form-error' %}

    <div class="form-pristine">
      <input type="text" name="email" class="input-pristine form-control" id="loginEmail" placeholder="{{ 'customer.form.enter' | t }}{{ 'customer.login_page.email' | t }}" required
        data-pristine-required-message="{{ 'customer.register.email' | t | capitalize }}{{ 'customer.error.empty_error' | t }}" data-pristine-email-message="{{ 'customer.register.email' | t | capitalize }}{{ 'customer.error.empty_error' | t }}">
      <label for="loginEmail" class="d-none">{{ 'customer.login_page.email' | t }}</label>
    </div>

    <visible-control class="form-pristine position-relative d-block mt-3">
      <div class="is-invalid position-relative">
        <input type="password" name="password" class="input-pristine form-control as-visible-input" id="loginPassword" required
        data-pristine-required-message="{{ 'customer.login_page.password' | t | capitalize}}{{ 'customer.error.empty_error' | t }}"   placeholder="{{ 'customer.form.enter' | t | capitalize }}{{ 'customer.login_page.password' | t }}">
        <div class="as-visible-control visible-control content-invisible input-btn-overlay-end gray-400">
          <div class="icon-eye-off cursor-pointer">
            {% render 'icon-eye-off' %}
          </div>
          <div class="icon-eye cursor-pointer">
            {% render 'icon-eye' %}
          </div>
        </div>
      </div>
      <label for="loginPassword" class="d-none">{{ 'customer.login_page.password' | t }}</label>
    </visible-control>
    
    <div class="mt-3 small gray-600">{{ 'customer.login_page.privacy_policy_html' | t }}</div>

    <input type="hidden" name="source" value="store" class="as-source-param">
    <input type="hidden" name="return_to" value="{{ request.origin | append: '/pages/redirect' }}" class="as-update-redirect as-return-to-param">
    <input type="hidden" name="store" value="{{ shop.permanent_domain | remove: ".myshopify.com" }}" class="as-store-param">

    <div class="as-login-error d-none">{{ 'customer.login_page.login_errors' | t }}</div>
    <div class="as-reset-error d-none">{{ 'customer.login_page.account_upgrade_tips_html' | t }}</div>
    <div class="as-frequent-error d-none">{{ 'customer.error.too_many_requests' | t }}</div>
    <div class="as-other-error d-none">{{ 'customer.error.other_error' | t }}</div>

    <button type="submit" class="as-submit btn btn-primary w-100 mt-4">{{ 'customer.login_page.submit' | t }}</button>
  </form>

  <div class="mt-3 small gray-600 text-center">
    {{ 'customer.login_page.forgot_password_html' | t }}
  </div>

  <div class="mt-4">
    {% render 'account-social-login' %}
  </div>

  <div class="mt-4 small gray-600 text-center">
    {{ 'customer.login_page.create_account_html' | t }}
  </div>
  
</section>